<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<link rel="stylesheet" href="../css/reset.css">
        <script src="../js/jquery-3.6.0.min.js"></script>
        <script src="../js/interface.js"></script>
		<style>
			.w {
				width: 1226px;
				margin: 0 auto;
			}

			.goodsList li {
				width: 230px;
				float: left;
				padding: 5px;
				box-sizing: border-box;
				border: 1px solid #333;
				margin-left: 10px;
				margin-bottom: 10px;
			}

			.goodsList li img {
				width: 80%;
				display: block;
				margin: 0 auto;
			}

			.title {
				font-size: 14px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.price {
				line-height: 32px;
				font-size: 14px;
				color: #e33333;
			}
		</style>
	</head>

	<body>
		<!-- ul.goodsList>li>a>img+.title+.price -->
		<ul class="goodsList w cl">
			<!-- <li>
            <a href="">
                <img src="https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/201204/13/5704/79299/613748c7E58f768df/918ac8921e3bdfe9.jpg.webp" alt="">
                <div class="title">一加 OnePlus 9R 5G 120Hz 柔性屏12GB+256GB 黑岛 骁龙870 65W快充 专业游戏配置 超大广角拍照手机</div>
                <div class="price">￥ 3199.00 </div>
            </a>
        </li>
        <li>
            <a href="">
                <img src="https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/201204/13/5704/79299/613748c7E58f768df/918ac8921e3bdfe9.jpg.webp" alt="">
                <div class="title">一加 OnePlus 9R 5G 120Hz 柔性屏12GB+256GB 黑岛 骁龙870 65W快充 专业游戏配置 超大广角拍照手机</div>
                <div class="price">￥ 3199.00 </div>
            </a>
        </li>
        <li>
            <a href="">
                <img src="https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/201204/13/5704/79299/613748c7E58f768df/918ac8921e3bdfe9.jpg.webp" alt="">
                <div class="title">一加 OnePlus 9R 5G 120Hz 柔性屏12GB+256GB 黑岛 骁龙870 65W快充 专业游戏配置 超大广角拍照手机</div>
                <div class="price">￥ 3199.00 </div>
            </a>
        </li>
        <li>
            <a href="">
                <img src="https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/201204/13/5704/79299/613748c7E58f768df/918ac8921e3bdfe9.jpg.webp" alt="">
                <div class="title">一加 OnePlus 9R 5G 120Hz 柔性屏12GB+256GB 黑岛 骁龙870 65W快充 专业游戏配置 超大广角拍照手机</div>
                <div class="price">￥ 3199.00 </div>
            </a>
        </li>
        <li>
            <a href="">
                <img src="https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/201204/13/5704/79299/613748c7E58f768df/918ac8921e3bdfe9.jpg.webp" alt="">
                <div class="title">一加 OnePlus 9R 5G 120Hz 柔性屏12GB+256GB 黑岛 骁龙870 65W快充 专业游戏配置 超大广角拍照手机</div>
                <div class="price">￥ 3199.00 </div>
            </a>
        </li> -->
		</ul>
	</body>
	<script>
	    searchAllGoods().then(data=>{
            console.log(data);
            var {status,list} = data;
            var html = "";
			list.forEach(function(item){
				console.log(item);
				var {id,goodsId,goodsName,goodsPrice,goodsImg} = item;
				html+=`<li>
						<a href="./goodsDetail.html?gid=${goodsId}">
							<img src="${goodsImg}" alt="">
							<div class="title">${goodsName}</div>
							<div class="price">￥ ${goodsPrice} </div>
						</a>
				</li>`;
			})
			$(".goodsList").html(html);
        })

		
        // var html = "";
		// 	list.forEach(function(item){
		// 		console.log(item);
		// 		var {target_url,op,jp,img,t} = item;
		// 		html+=`<li>
		// 				<a href="https://${target_url}">
		// 					<img src="https://img10.360buyimg.com/jdcms/s300x300_${img}" alt="">
		// 					<div class="title">${t}</div>
		// 					<div class="price">￥ ${op} </div>
		// 				</a>
		// 		</li>`;
		// 	})
		// 	ul.innerHTML = html;
		
		
		
		
	</script>
</html>
